<template>
    <div>

        <el-form :inline="true">
            <el-form-item label="订单编码">
                <el-input v-model="orderNo" placeholder="请输入订单编码"></el-input>
            </el-form-item>
            
            <el-form-item label="仓库">
                <el-select v-model="warehouse" placeholder="请选择仓库">
                     <el-option label="全部" value=""></el-option>
                     <el-option label="仓库1" value="1"></el-option>
                     <el-option label="仓库2" value="2"></el-option>
                     <el-option label="仓库3" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="送货类别">
                <el-select v-model="deliveryType" placeholder="请选择送货类别">
                     <el-option label="全部" value=""></el-option>
                     <el-option label="海运" value="1"></el-option>
                     <el-option label="陆运" value="2"></el-option>
                     <el-option label="空运" value="3"></el-option>
                </el-select>
                </el-form-item>
                
                <el-form-item label="状态">
                    <el-select v-model="orderStatus" placeholder="请选择订单状态">
                         <el-option label="全部" value=""></el-option>
                         <el-option label="已完成" value="1"></el-option>
                         <el-option label="未完成" value="2"></el-option>
                         <el-option label="已取消" value="3"></el-option>
                    </el-select>
                </el-form-item>
        
                <el-form-item label="客户编码">
                    <el-input v-model="customercode" placeholder="请输入客户编码"></el-input>
                </el-form-item>
                
                <el-form-item label="客户名称">
                    <el-input v-model="customername" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                
                <el-form-item label="总金额">
                    <el-input v-model="totalAmount" placeholder="请输入总金额"></el-input>
                </el-form-item>
        
                <el-form-item label="货别">
                    <el-select v-model="orderType" placeholder="请选择货别">
                         <el-option label="全部" value=""></el-option>
                         <el-option label="RMB" value="1"></el-option>
                         <el-option label="USD" value="2"></el-option>
                         <el-option label="EUR" value="3"></el-option>

                    </el-select>
    </el-form-item>
    <el-form-item label="结账方式">
        <el-select v-model="settleType" placeholder="请选择结账方式">
             <el-option label="全部" value=""></el-option>
             <el-option label="现金" value="1"></el-option>
             <el-option label="银行转账" value="2"></el-option>
             <el-option label="支付宝" value="3"></el-option>
             <el-option label="微信" value="4"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="业务员">
        <el-select v-model="saleman" placeholder="请选择业务员">
             <el-option label="全部" value=""></el-option>
             <el-option label="张三" value="1"></el-option>
        </el-select>
    </el-form-item>
    
    <el-form-item label="创建者">
        <el-input v-model="createBy" placeholder="请输入创建者"></el-input>
    </el-form-item>
    
    <el-form-item label="创建时间">
        <el-date-picker v-model="createTime" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
            <el-button type="primary" @click="search" style="margin-bottom: 20px;"><el-icon style="margin-right: 10px;"><Search /></el-icon>搜索</el-button>
        </el-form>
        
      <!-- 按钮组 color="#3A9DFF"-->
      <el-row>
            <el-col :span="10">
                <div class="button-group">
                    <el-button plain type="primary" class="button-item" v-prem="'manpower:basicData:rank:insert'"  @click="insert">
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="新增"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">新增</span>
                    </el-button>
                    <el-button plain type="success"  class="button-item" v-prem="'manpower:basicData:rank:insert'"  @click="update">
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="修改" color="#93E2A3"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">修改</span>
                    </el-button>
                    <el-button plain type="danger" disabled>
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="删除" color="#FF9292"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">删除</span>
                    </el-button>
                    <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

                </div>

            </el-col>
      </el-row>
        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="订单编码" width="120"></el-table-column>
            <el-table-column prop="warehouse" label="仓库" width="120"></el-table-column>
            <el-table-column prop="deliveryType" label="送货类别" width="120"></el-table-column>
            <el-table-column prop="orderStatus" label="状态" width="120"></el-table-column>
            <el-table-column prop="customercode" label="客户编码" width="120"></el-table-column>
            <el-table-column prop="customername" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="totalAmount" label="总金额" width="120"></el-table-column>
            <el-table-column prop="orderType" label="货别" width="120"></el-table-column>
            <el-table-column prop="settleType" label="结账方式" width="120"></el-table-column>
            <el-table-column prop="saleman" label="业务员" width="120"></el-table-column>
            <el-table-column prop="createBy" label="创建者" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove" @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" width="1500px">  
    <el-form :model="data" ref="orderForm" label-width="100px" style="max-width: 1500px; margin: auto;">  
        <el-row :gutter="18">  
            <el-col :span="6">  
                <el-form-item label="单号">  
                    <el-input v-model="data.orderNo" placeholder="请输入单号"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="6">  
                <el-form-item label="日期">  
                    <el-date-picker v-model="data.orderDate" type="date" placeholder="选择日期"></el-date-picker>  
                </el-form-item>  
            </el-col>  
            <el-col :span="6">  
                <el-form-item label="送货类别">  
                    <el-select v-model="data.producttype" placeholder="请选择送货类别">  
                        <el-option label="海运" value="1"></el-option>  
                        <el-option label="陆运" value="2"></el-option>  
                        <el-option label="空运" value="3"></el-option>  
                    </el-select>  
                </el-form-item>  
            </el-col>  
            <el-col :span="6">  
                <el-form-item label="仓库">  
                    <el-select v-model="data.producttype" placeholder="请选择仓库">  
                        <el-option label="仓库1" value="1"></el-option>  
                        <el-option label="仓库2" value="2"></el-option>  
                        <el-option label="仓库3" value="3"></el-option>  
                    </el-select>  
                </el-form-item>  
            </el-col>  
        </el-row>  

        <el-row :gutter="20">  
            <el-col :span="6">  
                <el-form-item label="客户编码">  
                    <el-input v-model="data.customername" placeholder="请输入客户编码"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="6">  
                <el-form-item label="客户名称">  
                    <el-input v-model="data.customername" placeholder="请输入客户名称"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="4">  
                <el-form-item label="业务员">  
                    <el-input v-model="data.customername" placeholder="请输入业务员"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="4">  
                <el-form-item label="跟单">  
                    <el-input v-model="data.customername" placeholder="请输入跟单"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="4">  
                <el-form-item label="结账方式">  
                    <el-select v-model="data.producttype" placeholder="请选择结账方式">  
                        <el-option label="现金" value="1"></el-option>  
                        <el-option label="银行转账" value="2"></el-option>  
                        <el-option label="支付宝" value="3"></el-option>  
                        <el-option label="微信" value="4"></el-option>  
                    </el-select>  
                </el-form-item>  
            </el-col>  
    </el-row>
        <el-row :gutter="20">  
            <el-col :span="6">  
                <el-form-item label="收货地址">  
                    <el-input v-model="data.material" placeholder="请输入收货地址"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="6">  
                <el-form-item label="币别">  
                    <el-select v-model="data.producttype" placeholder="请选择币别">  
                        <el-option label="RMB" value="1"></el-option>  
                        <el-option label="USD" value="2"></el-option>  
                        <el-option label="EUR" value="3"></el-option> 
                        <el-option label="GBP" value="4"></el-option>  
                    </el-select>  
                </el-form-item>  
            </el-col>  
               <el-col :span="4">  
                <el-form-item label="总金额">  
                    <el-input v-model="data.colorCode" placeholder="请输入色号"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="4">  
                <el-form-item label="总重量">  
                    <el-input v-model="data.colorCode" placeholder="请输入色号"></el-input>  
                </el-form-item>  
            </el-col>  
            <el-col :span="4">  
                <el-form-item label="总金总件数">  
                    <el-input v-model="data.colorCode" placeholder="请输入色号"></el-input>  
                </el-form-item>  
            </el-col>  
        </el-row>  

        <el-row :gutter="20">  
            <el-col :span="20">  
                <el-form-item label="备注">  
                    <el-input v-model="data.remark" type="textarea" :rows="3" placeholder="请输入备注" style="width: 100%;"></el-input>  
                </el-form-item>  
            </el-col>  
        </el-row>  
    </el-form>  
    <div class="line">  
    <span>销售订单产品列信息</span>  
</div>  
<el-row>
            <el-col :span="10">
                <div class="button-group">
                    <el-button plain type="primary" class="button-item" v-prem="'manpower:basicData:rank:insert'"  @click="insert">
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="新增"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">新增</span>
                    </el-button>
                    <el-button plain type="danger" disabled>
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="+从销售订单添加" color="#FF9292"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">从销售订单添加</span>
                    </el-button>
                    <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>
                </div>
            </el-col>
      </el-row>
      <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="序号" width="120"></el-table-column>
            <el-table-column prop="warehouse" label="仓库" width="120"></el-table-column>
            <el-table-column prop="deliveryType" label="送货类别" width="120"></el-table-column>
            <el-table-column prop="orderStatus" label="状态" width="120"></el-table-column>
            <el-table-column prop="customercode" label="客户编码" width="120"></el-table-column>
            <el-table-column prop="customername" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="totalAmount" label="总金额" width="120"></el-table-column>
            <el-table-column prop="orderType" label="货别" width="120"></el-table-column>
            <el-table-column prop="settleType" label="结账方式" width="120"></el-table-column>
            <el-table-column prop="saleman" label="业务员" width="120"></el-table-column>
            <el-table-column prop="createBy" label="创建者" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove" @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    <div slot="footer" style="text-align: right;">  
        <el-button type="primary" @click="submitOrder">确 定</el-button>  
        <el-button @click="visible = false">取 消</el-button>  
    </div>  
</el-dialog>

    </div>
</template>

<script setup>

import { ref } from 'vue'

let data = ref({})
let visible = ref(false)
let title = ref('')

const insert = () => {
    visible.value = true
    title.value = '添加订单'
}
const update = (row) => {
    visible.value = true
    title.value = '修改订单'
    data.value = row
}

// 初始化状态（设置默认值）
const orderNo = ref('');
const warehouse = ref('');
const deliveryType = ref('');
const orderStatus = ref('');
const customercode = ref('');
const customername = ref('');
const totalAmount = ref('');
const orderType = ref('');
const settleType = ref('');
const saleman = ref('');
const createBy = ref('');
const createTime = ref('');

// 示例订单数据
let salesorder = ref([
    {
        orderNo: "123456",
        warehouse: "仓库1",
        deliveryType: "陆运",
        orderStatus: "已完成",
        customercode: "123456",
        customername: "客户1",
        totalAmount: "10000",
        orderType: "RMB",
        settleType: "现金",
        saleman: "张三",
        createBy: "admin",
        createTime: "2022-01-01"
    },
    {
        orderNo: "234567",
        warehouse: "仓库2",
        deliveryType: "空运",
        orderStatus: "未完成",
        customercode: "234567",
        customername: "客户2",
        totalAmount: "20000",
        orderType: "USD",
        settleType: "银行转账",
        createBy: "admin",
        createTime: "2022-01-02"
    },
   
    {
        orderNo: "654321",
        warehouse: "仓库3",
        deliveryType: "海运",
        orderStatus: "已取消",
        customercode: "654321",
        customername: "客户3",
        totalAmount: "30000",
        orderType: "EUR",
        settleType: "支付宝",
        createBy: "admin",
        createTime: "2022-01-03"
    }
]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};


const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style  scoped>
/* 样式部分，可以根据需求添加 */
.el-select {
    width: 150px;
}
.line {  
            display: flex;  
            align-items: center;  
            text-align: center;  
            margin: 20px 0;  
        }  
        .line::before, .line::after {  
            content: '';  
            flex: 1;  
            border-bottom: 1px solid #000; /* 横线颜色 */  
            margin: 0 10px;  
        }  
        .line span {  
            padding: 0 10px; /* 字体与线之间的间隔 */  
        }  
</style>




